<template>
    <view class="wlk-goods-add pd30">
        <view class="goods wlkflex justify-between align-start">
            <image :src="item.images[0]" class="br08"  mode="aspectFill"></image>
            <view class="info wlkflex wrap align-content-between">
                <view class="wd100">
                    <view class="title u-line-2">{{item.title}}</view>
                </view>
                <view class="wd100 money wlkflex justify-between">
                    <view class="left">
                        <view class="vip wlkflex br04 overHidden">
                            <view class="name" :style="{backgroundColor: themeColor}">会员价</view>
                            <view class="vip_price"><text class="mr05">¥</text>{{item.vip_price}}</view>
                        </view>
                        <view class="price mt10"><text class="mr05">¥</text>{{item.price}}</view>
                    </view>
                </view>
            </view>
        </view>
        <u-divider></u-divider>
        <view class="wlkflex justify-between pt20 pb20">
            <view class="num-title bold">数量 <text class="stock ml10">库存 <text class="ml05 mr05">{{item.stock}}</text>件</text></view>
            <u-number-box :disabledInput="true" v-model="quantity" min="1" :max="item.stock"></u-number-box>
        </view>
        <u-divider></u-divider>
        <view class="btn-box wlkflex justify-center">
            <view class="cart center" @click="addCart" :style="{color: themeColor}">加入购物车</view>
            <view class="pay center" @click="pay" :style="{backgroundColor: themeColor}">立即购买</view>
        </view>
    </view>
</template>

<script>
import { mapState} from 'vuex';
import {toUrl} from "../../wlkutils/tools";
export default {
    name: 'wlk-goods-add',
    props:{
        item:{
            type: Object,
            default: ()=> {
                return {}
            }
        },
    },

    data(){
        return {
            quantity:1
        }
    },
    watch: {
    },
    computed:{
        ...mapState(['themeColor','isLogin'])
    },
    created() {

    },
    methods:{
        addCart(){
            if(!this.isLogin){
                this.$emit('editAddShow');
                this.$store.commit('setLoginPopupShow', true);
                return;
            }
            if(this.quantity <= 0){
                uni.$u.toast('请选择数量');
                return;
            }
            uni.$u.http.post('cart/add', {
                id:this.item.id,
                quantity:this.quantity
            }).then(res => {
              let nowQuantity = this.quantity;
              this.quantity = 1;
              this.$emit('editAddShow', nowQuantity);
              uni.$u.toast(res.msg);
            }).catch(res => {
            })
        },
        pay(){
            if(!this.isLogin){
                this.$emit('close');
                this.$store.commit('setLoginPopupShow', true);
                return;
            }
            if(this.quantity <= 0){
                uni.$u.toast('请选择数量');
                return;
            }
            if(this.item.stock<this.quantity){
                uni.$u.toast('库存不足');
                return;
            }
            this.$emit('close');
            let obj = new Object();
            let arr = new Array();
            obj.id = this.item.id;
            obj.quantity = this.quantity;
            arr.push(obj);
            this.$Router.push({
                path: '/pages/goods/create',
                query: arr
            });
        }
    }
}
</script>

<style scoped lang="scss">
    .wlk-goods-add{
        height: 600rpx;
        .goods{
            background-color: #FFFFFF;
            image{
                width: 180rpx;
                height: 180rpx;
                display: block;
            }
            .info{
                width: 71.5%;
                height: 180rpx;
                .title{
                    width: 90%;
                    font-size: $font-lt;
                    font-weight: bold;
                }
                .desc{
                    color: $uni-text-color-grey;
                    font-size: $font-sm;
                }
                .money{
                    font-size: $font-base;
                    .left{
                        .vip{
                            max-width: 280rpx;
                            background-color: $-wash-wait-color;
                            .name{
                                font-size: $font-base;
                                color: #FFE785;
                                padding: 6rpx 10rpx;

                            }
                            .vip_price{
                                padding: 6rpx 10rpx;
                            }
                        }
                        .price{
                            color: $-wash-price-color;
                        }
                    }
                }

            }
        }
        .num-title{
            font-size: $font-base;
            .stock{
                font-size: $font-sm;
                color: $uni-text-color-grey;
                font-weight: normal;
            }
        }
        .btn-box{
            margin-top: 90rpx;
            .cart{
                width: 50%;
                padding: 20rpx 0;
                background-color: $-wash-wait-color;
                border-radius: 40rpx 0 0 40rpx;
            }
            .pay{
                width: 50%;
                padding: 20rpx 0;
                color: white;
                border-radius: 0 40rpx 40rpx 0;
            }
        }
    }
</style>
